<template>
    <div id="homePage">
        <div class="block">
            <el-carousel height="500px" autoplay :interval="2500">
                <el-carousel-item v-for="url in urls" :key="url">
                    <el-image style="width: 1920px; height: 500px" :src="url"></el-image>
                </el-carousel-item>
            </el-carousel>
        </div>
        <hr>
        <el-form ref="form" :model="form" label-width="0">
            <el-form-item>
                <el-input type="textarea" style="width:80%"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        name: "homePage",
        data () {
            return {
                urls: [
                    '../../img/banner1.jpg',
                    '../../img/banner2.jpg',
                    '../../img/banner3.jpg',
                    '../../img/banner4.jpg'
                ],
                form: {
                    text: '',
                },
            }
        }
    }
</script>
<style>
    @import '../../css/homePage.css';
</style>